<template>
  <div>
    <el-card style="width:100%">
      <ul style="display: flex; width: 100%">
        <li style="margin-right: 20px">
          <el-card style="width: 760px; margin-bottom: 20px">
            <div>
              <el-input
                v-model="names"
                placeholder="请输入名称"
                style="width: 300px; margin-right: 20px"
              ></el-input>
              <el-button type="primary" @click="search">搜索</el-button>
            </div>
          </el-card>
          <el-card style="width: 760px">
            <el-table :data="tableData" border >
          
              </el-table-column>
              <el-table-column
                align="center"
                prop="pid"
                label="编号"
                width="70"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="name"
                label="地市"
                width="70"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="停电线路(条·次)"
                width="70"
              >
                <template slot-scope="scope">
                  <span style="color: #ffbf45">{{
                    scope.row.deadLine.numbers
                  }}</span>
                  /
                  <span>{{ scope.row.deadLine.total }}</span>
                </template>
              </el-table-column>
              <!-- 整线停电 -->
              <el-table-column
                label="整线停电(条·次)"
                align="center"
                width="70"
              >
                <template slot-scope="scope">
                  <span style="color: #ffbf45">{{
                    scope.row.allPowerCut.numbers
                  }}</span>
                  /
                  <span>{{ scope.row.allPowerCut.total }}</span>
                </template>
              </el-table-column>
              <!-- 支线停电 -->
              <el-table-column
                label="支线停电(条·次)"
                align="center"
                width="70"
              >
                <template slot-scope="scope">
                  <span style="color: #ffbf45">{{
                    scope.row.branchPowerCut.numbers
                  }}</span>
                  /
                  <span>{{ scope.row.branchPowerCut.total }}</span>
                </template>
              </el-table-column>
              <!-- 配变停电 -->
              <el-table-column
                label="配变停电(条·次)"
                align="center"
                width="70"
              >
                <template slot-scope="scope">
                  <span style="color: #ffbf45">{{
                    scope.row.distributionPowerCut.numbers
                  }}</span>
                  /
                  <span>{{ scope.row.distributionPowerCut.total }}</span>
                </template>
              </el-table-column>
              <!-- 单配变停电 -->
              <el-table-column
                label="单配变停电(条·次)"
                align="center"
                width="70"
              >
                <template slot-scope="scope">
                  <span style="color: #ffbf45">{{
                    scope.row.branchDistributionPowerCut.numbers
                  }}</span>
                  /
                  <span>{{ scope.row.branchDistributionPowerCut.total }}</span>
                </template>
              </el-table-column>
              <!-- 停电用户 -->
              <el-table-column
                label="停电用户(条·次)"
                align="center"
                width="70"
              >
                <template slot-scope="scope">
                  <span style="color: #ffbf45">{{
                    scope.row.powerCutUser.numbers
                  }}</span>
                  /
                  <span>{{ scope.row.powerCutUser.total }}</span>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                label="操作"
                width="170"
              >
                <template slot-scope="scope">
                  <div style="display: flex">
                    <el-button type="primary" @click="compile(scope.row)"
                      >编辑</el-button
                    >

                    <el-popconfirm
                      title="这是一段内容确定删除吗？"
                      @confirm="del(scope)"
                    >
                      <el-button slot="reference" type="primary"
                        >删除</el-button
                      >
                    </el-popconfirm>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- @size-change="handleSizeChange"
        @current-change="handleCurrentChange" -->
            <el-pagination
              :current-page="pageIndex"
              :page-size="pageNumbers"
              :page-sizes="[3, 5, 7]"
              layout="prev, pager, next, jumper,->,sizes,total"
              :total="count"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </el-card>
        </li>
        <li style="flex: 1">
          <el-card style="height: 626px">
            <Charts />
          </el-card>
        </li>
      </ul>
    </el-card>

    <div style="display: flex; margin-top: 20px">
      <!-- 表单 -->
      <el-card style="margin-right: 20px; width: 50vw;height:100%" class="cards">
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          :model="formLabelAlign"
        >
          <el-form-item label="编号">
            <el-input
              v-model="formLabelAlign.pid"
              :disabled="isTrue"
            ></el-input>
          </el-form-item>
          <el-form-item label="地市">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item label="停电线路">
            <template>
              <div style="display: flex">
                <el-input
                  v-model.number="formLabelAlign.deadLine.numbers"
                  placeholder="单"
                ></el-input>
                <el-input
                  v-model.number="formLabelAlign.deadLine.total"
                  placeholder="总"
                ></el-input>
              </div>
            </template>
          </el-form-item>
          <el-form-item label="整线停电">
            <template>
              <div style="display: flex">
                <el-input
                  v-model.number="formLabelAlign.allPowerCut.numbers"
                  placeholder="单"
                >
                </el-input>
                <el-input
                  v-model.number="formLabelAlign.allPowerCut.total"
                  placeholder="总"
                ></el-input>
              </div>
            </template>
          </el-form-item>
          <el-form-item label="支线停电">
            <template>
              <div style="display: flex">
                <el-input
                  v-model.number="formLabelAlign.branchPowerCut.numbers"
                  placeholder="单"
                >
                </el-input>
                <el-input
                  v-model.number="formLabelAlign.branchPowerCut.total"
                  placeholder="总"
                >
                </el-input>
              </div>
            </template>
          </el-form-item>
          <el-form-item label="配变停电">
            <template>
              <div style="display: flex">
                <el-input
                  v-model.number="formLabelAlign.distributionPowerCut.numbers"
                  placeholder="单"
                >
                </el-input>
                <el-input
                  v-model.number="formLabelAlign.distributionPowerCut.total"
                  placeholder="总"
                >
                </el-input>
              </div>
            </template>
          </el-form-item>
          <el-form-item label="单配变停电">
            <template>
              <div style="display: flex">
                <el-input
                  v-model.number="
                    formLabelAlign.branchDistributionPowerCut.numbers
                  "
                  placeholder="单"
                ></el-input>
                <el-input
                  v-model.number="
                    formLabelAlign.branchDistributionPowerCut.total
                  "
                  placeholder="总"
                >
                </el-input>
              </div>
            </template>
          </el-form-item>
          <el-form-item label="停电用户">
            <template>
              <div style="display: flex">
                <el-input
                  v-model.number="formLabelAlign.powerCutUser.numbers"
                  placeholder="单"
                >
                </el-input>
                <el-input
                  v-model.number="formLabelAlign.powerCutUser.total"
                  placeholder="总"
                ></el-input>
              </div>
            </template>
          </el-form-item>
        </el-form>
        <el-button type="primary" v-if="!isTrue" @click="add">添加</el-button>
        <el-button type="primary" @click="change" v-else>修改</el-button>
        <el-button type="primary" @click="clear">取消</el-button>
      </el-card>

      <!-- e-charts -->
      <el-card style="flex: 1">
        <div id="charts">1</div>
      </el-card>
      <div><el-button type="primary" @click="nihao">你好</el-button></div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { searchs } from "../../../api/index";
import {
  pageList,
  dellists,
  addList,
  chageList,
  logout,
  allList,
} from "../../../api/index";
import * as echarts from "echarts";
import Charts from "./chart.vue";
export default {
  components: { Charts },
  data() {
    return {
            loading:false,  //加载表格
      allLists: [],
      myChart: null,
      myCharts: null,
      currentPage: 1, //当前页
      totalPage: 0,
      names: "",
      tableData: [],
      count: 0,
      pageIndex: 1,
      pageNumbers: 5,

      labelPosition: "left",
      isTrue: false,
      formLabelAlign: {
        pid: "",
        name: "",
        deadLine: {
          total: "",
          numbers: "",
        },
        // 整线停电
        allPowerCut: {
          total: "",
          numbers: "",
        },
        // 支线停电
        branchPowerCut: {
          total: "",
          numbers: "",
        },
        // 配变停电
        distributionPowerCut: {
          total: "",
          numbers: "",
        },
        // 单配变停电
        branchDistributionPowerCut: {
          total: "",
          numbers: "",
        },
        // 停电用户
        powerCutUser: {
          total: "",
          numbers: "",
        },
      },
    };
  },

  methods: {
  nihao(){
this.$bus.$emit("aa",this.count)
  },
    getList() {
      // axios
      // 	.get("http://localhost:8008/pages", {
      // params: {
      // 	pageIndex: this.pageIndex,
      // 	pageNumbers: this.pageNumbers
      // },
      // 	})
      // this.loading=true
      pageList({
        params: {
          pageIndex: this.pageIndex,
          pageNumbers: this.pageNumbers,
        },
      }).then(({ data }) => {
        //  this.loading=false
        this.count = data.count;
        this.tableData = data.page;
      });
    },
    // 搜索
    search() {
      if (this.names) {
        // axios.post('http://localhost:8008/searchList', {
        // 	names: this.names
        // })

        searchs(this.names).then((r) => {
          console.log(r);
          if (r.data.length > 0) {
            this.tableData = r.data;
            this.count = r.data.length;
            this.pageIndex = 1;
          } else {
            this.$message.error(`错了哦，没有 ${this.names} 这个城市`);
          }
        });
      } else {
        this.$message("内容不能为空");
      }
    },
    // 切换每页数量
    handleSizeChange(e) {
      this.pageNumbers = e;
      this.getList();
    },
    // 切换页码
    handleCurrentChange(e) {
      this.pageIndex = e;
      this.getList();
    },
    // 删除
    del(scope) {
      let row = scope.row;
      console.log(row);
      dellists(row.pid).then((r) => {
        if (r.status == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getList();
        }
      });
    },
    // 编辑
    compile(row) {
      this.isTrue = true;
      this.formLabelAlign = JSON.parse(JSON.stringify(row));
    },
    // 修改
    change() {
      // axios.post("http://localhost:8008/compile", {
      // 	formLabelAlign: this.formLabelAlign
      // })
      chageList(this.formLabelAlign).then((r) => {
        console.log(r);
        if (r.status == 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.getList();
        }
      });
    },
    // 添加
    add() {
      let arr = [];

      for (let key in this.formLabelAlign) {
        if (typeof this.formLabelAlign[key] == "object") {
          for (let keys in this.formLabelAlign[key]) {
            if (this.formLabelAlign[key][keys]) {
              arr.push(this.formLabelAlign[key][keys]);
            }
          }
        } else {
          if (this.formLabelAlign[key]) {
            arr.push(this.formLabelAlign[key]);
          }
        }
      }

      // for (let key in this.formLabelAlign) {
      //   for (let keys in this.formLabelAlign[key]) {
      //     if (this.formLabelAlign[key][keys]) {
      //       arr.push(this.formLabelAlign[key][keys]);
      //     }
      //   }
      // }

      if (arr.length == 14) {
        if (
          this.tableData.findIndex((r) => r.pid == this.formLabelAlign.pid) ==
          -1
        ) {
          // axios
          // 	.post("http://localhost:8008/addLidst", {
          // 		formLabelAlign: this.formLabelAlign,
          // 	})
          addList(this.formLabelAlign).then((r) => {
            console.log(r);
            if (r.status == 200) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              Object.assign(
                this._data.formLabelAlign,
                this.$options.data().formLabelAlign
              );

              this.getList();
            }
          });
        } else {
          this.$message("编号已存在");
        }
      } else {
        this.$message("请输入完整内容");
      }
    },
    // 清空
    clear() {
      Object.assign(
        this._data.formLabelAlign,
        this.$options.data().formLabelAlign
      );
    },

    inCharts(a) {
      //  let start=(this.currentPage-1)*5
      //  let end=start+5
      //  let currentData=a.slice(start,end)
      // 绘制图表
      this.myChart.setOption({
        title: {
          text: "ECharts",
        },
        tooltip: {},
        xAxis: {
          data: a.map((r) => r.name),
          // axisTick: {length:5},
         
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: a.map((r) => r.pid),
            //   设置图形样式
            barCategoryGap: "55%",
              //  barWidth:'20%',
              
            itemStyle: {
              //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              borderRadius: [50, 50, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#8c72fc",
                },
                {
                  offset: 1,
                  color: "purple",
                },
              ]),
            },
          },
        ],
      });
    },
  },
  mounted() {
    this.getList();
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById("charts"));

    allList().then(({ data }) => {
      this.allLists = data;
    });
  },
  watch: {
    tableData(a, b) {
      this.inCharts(a);
    },
  },
};
</script>

<style scoped lang="scss">
#charts {
  width: 100%;
 
  height: 576px;

}
</style>
